@import './vm';
@import './common';

header {
  .menu {
    position: absolute;
    left: vw(22);
    top: vw(34);
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    align-content: space-between;
    width: vw(30);
    height: vw(23);

    .line {
      width: 100%;
      height: vw(4);
      background-color: #fff;
    }

    .message {
      position: absolute;
      right: vw(-13);
      top: vw(-13);
      width: vw(26);
      height: vw(26);
      border-radius: 50%;
      background-color: #f00;
      color: #fff;
      font-size: vw(8);
      text-align: center;
      line-height: vw(26);
    }
  }

}

.content {
  position: relative;
  // margin-bottom: vW(96);
  padding: vw(132) 0 0;
  height: 100vh;
  overflow-y: scroll;
  // box-sizing: border-box;
  z-index: 0;

  &::after {
    height: vw(96);
    content: '';
    display: block;
    visibility: hidden;
    /*设置元素的可见性，hidden代表元素不可见。虽然元素不可见，但是在文档中的位置还占据着。*/
  }

  .banner {
    position: relative;

    img {
      width: 100%;
    }

    .mask-layer {
      position: absolute;
      padding: 0 vw(29);
      bottom: 0;
      left: 0;
      width: 100%;
      height: vw(104);
      background-color: rgba(0, 0, 0, .3);
      color: #ffffff;

      >p {
        margin-top: vw(22);
        margin-bottom: vw(4);
        font-size: vw(26);
        text-align: left;
      }

      .mask-text {
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        align-items: flex-end;

        >p {
          font-size: vw(22);
        }

        .time {
          display: flex;
          display: -webkit-flex;
          justify-content: flex-end;
          font-size: vw(17);

          .eye {
            margin: 0 vw(6) 0 vw(22);

            img {
              margin-right: vw(6);
              width: vw(21);
              height: vw(14);
            }
          }

        }
      }
    }

  }

  .wrapper {
    display: flex;
    justify-content: space-between;
    margin: 0 vw(29);
    padding: vw(39) 0 vw(29) 0;
    height: vw(213);
    border-bottom: 1px solid #cecece;

    .left {
      width: vw(209);
      height: vw(142);

      >img {
        width: 100%;
        height: 100%;
      }
    }

    .right {
      padding-left: vw(16);
      width: vw(372);

      >p:first-of-type {
        font-size: vw(26);
      }

      >p:nth-of-type(2) {
        margin: vw(22) 0 vw(26);
        font-size: vw(22);
        line-height: vw(26);
        color: #c5c5c5;
      }

      .eye {
        display: flex;
        justify-content: flex-end;
        font-size: vw(18);
        color: #939393;

        img {
          margin: 0 vw(10) 0 vw(20);
          width: vw(21);
          height: vw(16);
        }
      }
    }
  }

  .more {
    height: vw(58);
    display: flex;
    justify-content: center;
    line-height: vw(58);

    >p {
      font-size: vw(22);
      color: #bbbbbb;
    }
  }

}

.footer {
  ul {
    li:nth-child(4) {
      color: #b20000;
    }
  }
}